* {
    margin:0;
    padding: 0;
    box-sizing: border-box;
    font-size: 16px;
}

.wrap{
    .progress-bar{
        width:7.5rem;
        height:20px;
        background:rgba(245,245,245,1);    
        position: fixed;
        left: 0;
        top: 0;  
        z-index: 100;
    }
    .progress-line{
        transition: all .3s;
        transform: width 1.5rem
    }
    @for $i from 1 through 5 {
        .progress-line-#{$i} { 
            height: 100%;
            background: #FF4545;
            width: 20% * $i !important;
         }
      }
      .progress-position{
          width: (7.5/5)+rem;
          height: 100%;
          line-height: 20px;
          text-align: center;
          font-size:.16rem;
          font-family:PingFang-SC-Medium;
          font-weight:500;
          color:rgba(255,255,255,1);
          float: right
      }
      .footer-containner{
          width: 7.5rem;
          height: 1rem;
          position: fixed;
          left: 0;
          bottom: 0;
          border-top: 1px solid #D9D9D9;
          z-index: 500;
          background: white;
          .control-box{
              height: 100%;
              .start-btn{
                    width:6.9rem;
                    height:.7rem;
                    background:rgba(0,132,255,1);
                    border-radius:.35rem;
                    text-align: center;
                    font-size:.3rem;
                    font-family:PingFang-SC-Medium;
                    font-weight:500;
                    color:rgba(255,255,255,1);
                    line-height: .7rem
              }
          }
          .start{
              display: flex;
              justify-content: center;
              align-items: center
          }
          .has-two{
              display: flex;
              padding: 0 .3rem;
              justify-content: space-between;
              align-items: center;
              &>div{
                width:3.2rem;
                height:.7rem;
                border:1px solid rgba(0,132,255,1);
                border-radius:.7rem;
                font-size:.3rem;
                font-family:PingFang-SC-Medium;
                font-weight:500;
                color:rgba(0,132,255,1);
                line-height:.7rem;
                text-align: center
              }
              &>div:nth-child(2){
                  background: #0084FF;
                  color: white
              }
          }
      }
      .main-containner{
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 50;
        padding-top: 20px;
        overflow: hidden;
        .page{
            font-size: .3rem;
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 60;
            padding-top: 20px; 
            transform: translate3d(0, 0, 0);
            transition: all .3s;
        }
        .moveLeft{
            transform: translate3d(-200%, 0, 0);
        }
        .moveRight{
            transform: translate3d(200%, 0, 0);
        }
      }
}

.page{
    .headline,.slide-wrap{
        min-height: 1rem;
        text-align: left;
        padding: 0 .3rem;
        font-size:.3rem;
        font-family:PingFang-SC-Bold;
        font-weight:bold;
        color:rgba(51,51,51,1);
        border-bottom: 1px solid #E6E6E6;
        display: flex;
        align-items: center
    }
    .slide-wrap{
        justify-content: space-between;
       &>div:nth-child(2){
          width: .27rem;
          height: .13rem;
          border-top:.13rem solid #CCCCCC  ;
          border-left:.13rem solid  transparent;
          border-right:.13rem solid  transparent
       }
    }
    .inner-containner{
        padding: .3rem;
        .input-wrap{
            width:6.9rem;
            height:.9rem;
            background:rgba(247,247,247,1);
            border-radius:6px;
        }
        .input-wrap{
            display: flex;
            justify-content: flex-start;
            align-items: center;
            padding: 0 .2rem;
            position: relative;
            margin-bottom: .2rem;
            input{
                border: none;
                outline: none;
                height: .7rem;
                background: #F7F7F7
            }
            &>div:nth-child(1){
                margin-right: .5rem;
                min-width: 1.5rem;
                white-space: nowrap;
                font-size: .3rem;
            }
            &>div:nth-child(3){
               position: absolute;
               top: 0;
               bottom: 0;
               right: .2rem;
               margin: auto;
               line-height: .9rem;
               font-size: .3rem;
            }
            .radio-wrap{
                display: flex;
                flex: 1;
                align-items: center;
                text-align: center;
                font-family:PingFang-SC-Medium;
                font-weight:500;
                color:rgba(204,204,204,1);
                border:1px solid rgba(204,204,204,1);
                border-radius:4px 0px 0px 4px;
                font-size: .3rem;
                &>div{
                    padding: .1rem .12rem;
                    font-size:.24rem;
                    width: .8rem
                    // background: 
                }
                &>div.active{
                    background: #0084FF;
                    color: white
                }
            }
            .checkbox-wrap{
                display: flex;
                flex: 1;
                align-items: center;
                label{
                    margin:0 .3rem 0 .1rem;
                }
            }
            .add-reduce-wrap{
                display: flex;
                flex: 1;
                text-align: center;
                align-items: center;
                width: 2rem;
                height: .4rem;
                border:1px solid rgba(204,204,204,1);
                border-radius:0px 4px 4px 0px;
                font-size: .24rem;
                font-family:PingFang-SC-Medium;
                font-weight:500;
                color:rgba(204,204,204,1);
                &>div:nth-child(1),&>div:nth-child(3){
                   width: .6rem;
                   line-height: .4rem;
                }
                &>div:nth-child(2){
                   width: .8rem;
                   line-height: .4rem;
                }
                &>div:nth-child(1),&>div:nth-child(2){
                     border-right: 1px solid rgba(204,204,204,1);
                }
            }
        }
    }
}

.page4{
    .for-to-year{
        padding: .1rem .2rem .3rem;  
        font-family:PingFang-SC-Medium;
        font-weight:500;
        color:rgba(51,51,51,1);
        border-bottom: 1px solid #E6E6E6;
        &>input{
            border: none;
            outline: none;
            border-bottom: 1px solid black;
            width: 2rem;
            text-align: center
        }
    }
    .select-title{
        padding: .1rem .2rem .3rem;  
        font-family:PingFang-SC-Medium;
        font-weight:500;
        color:rgba(51,51,51,1);
    }
    .select-main{
        padding-top: .4rem;
        .select-item{
            width:6.9rem;
            height:.9rem;
            background:rgba(247,247,247,1);
            border-radius:6px;
            text-align: center;
            line-height: .9rem;
            font-size:.24rem;
            font-family:PingFang-SC-Medium;
            font-weight:500;
            color:rgba(51,51,51,1);
            margin-bottom: .2rem
        }
        .select-item.active{
            border:1px solid rgba(0,132,255,1);
        }
    }
}

.page5{
    padding-bottom: 1rem;
    overflow: scroll
}





